<template>
  <div>
    <van-tabbar
      v-show="flag"
      v-model="active"
      active-color="red"
      inactive-color="rgb(102, 102, 102)"
      route
    >
      <van-tabbar-item
        to="/Home"
        :icon="active == 'Home' ? 'wap-home' : 'wap-home-o'"
        >首页</van-tabbar-item
      >
      <van-tabbar-item
        to="/Topic"
        :icon="active == 'Topic' ? 'coupon' : 'coupon-o'"
        >专题</van-tabbar-item
      >
      <van-tabbar-item
        to="/Catalog"
        :icon="active == 'Catalog' ? 'friends' : 'friends-o'"
        >分类</van-tabbar-item
      >
      <van-tabbar-item
        to="/Cart"
        :icon="active == 'Cart' ? 'shopping-cart' : 'shopping-cart-o'"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item
        to="/User"
        :icon="active == 'User' ? 'manager' : 'manager-o'"
        >我的</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      flag: true,
    };
  },
  watch: {
    $route: {
      handler(newVal, oldVal) {
        this.active = newVal.name;
        this.flag = newVal.name != "Productdetail"
      },
      immediate: true,
    },
  },
};
</script>

<style></style>
